<template>
  <div class="collect-list">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20" color="#E65D6E"/>
      </template>
    </van-nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="finishedText"
      @load="onLoad"
    >
      <mt-cell-swipe
        v-for="(item,index) in list"
        :key="index"
        :right="[
                {
                    content: '删除',
                    style: { background: '#E65D6E', color: '#fff'},
                    handler: () => deleteSection(item)
                }
            ]">
        <template #title>

        <van-card
          @click="openDetail(item)"
          :price="item.retailPrice"
          :desc="item.brief"
          :title="item.name"
          :thumb="item.picUrl"
        >
          <template #num>
            <span>已售100</span>
          </template>
        </van-card>
        </template>
      </mt-cell-swipe>
    </van-list>

  </div>
</template>

<script>
import {collectAddOrDelete, collectList} from '../../api/collect'
import {Toast} from 'vant'

export default {
  name: 'collect',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      finishedText: '没有更多了'
    }
  },
  methods: {
    openDetail (item) {
      this.$router.push({name: 'detail', params: {id: item.valueId}})
    },
    onLoad () {
      collectList({type: 0}).then(res => {
        let data = res.data.data
        if (data.pages === data.page) {
          this.finished = true
        }
        this.list = data.list
      })
    },
    back () {
      this.$router.back()
    },
    deleteSection (item) {
      let that = this
      collectAddOrDelete({valueId: item.valueId, type: 0}).then(res => {
        Toast.success('成功取消收藏')
        that.onload()
      })
    }
  }
}
</script>

<style  >
.collect-list {
  flex: 1;

  height: 100%;
}
.mint-cell-wrapper{
  padding: 0;
}
.mint-cell-swipe-button{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
